<template>
  <div class="usesale">
     <v-chart :option="getOption()" autoresize></v-chart>
  </div>
</template>


<script  setup>
import {computed, ref} from "vue";
import * as echarts from "echarts";
const dataList = ref({
  workShop1: [41, 50, 40, 55, 48, 53, 60, 38, 42, 37, 340, 70],
  workShop2: [30, 20, 35, 40, 36, 32, 40, 22, 50, 10, 120, 37],
});
const getOption = () => {
  return {
    legend: {
      data: ["应收租金", "实收租金"],
      top: "17px",
      right: "25px",
      icon: "rect",
      textStyle: {
        color: "#fff", // 设置文字颜色为红色
        fontSize: 14,
      },
      itemHeight: 10,
    },
    tooltip: {
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText:
        "opacity: 0.8;background-color:#050F1B;padding:10px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;color:#fff",
    },
    grid: {
      top: "16%",
      left: "3%",
      right: "5%",
      bottom: "6%",
      containLabel: true,
    },
    xAxis: {
      axisLabel: {
        //配置坐标轴刻度标签样式的部分开始
        color: "#d1dbef",
        fontSize: 12,
      },
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],

    },
    yAxis: {
      name: '万/元',
      nameTextStyle: {
        color: '#13E1EB',
        fontSize: 16,
        fontWeight: 'bold',
        padding: [0, 0, 0, 0],
      },
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#d1dbef",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#4f6287",
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: function (value) {
          return value;
        },
      },
    },
    series: [
      {
        name: "应收租金",
        data: dataList.value.workShop1,
        type: "bar",
        barWidth: "10",
        itemStyle: {
          color: "rgba(142, 147, 142, 0.3)",
          borderColor: "#9fa5af",
        },
      },
      {
        name: "实收租金",
        data: dataList.value.workShop2,
        type: "bar",
        barWidth: "10",
        itemStyle: {
          color: "rgba(41, 214, 35, 0.3)",
          borderColor: "#1be733",
        },
      },
      
    ],
  };
};
</script>

<style lang="scss" scoped>
.usesale {
  margin-top: 5px;
  height: 90%;
  background-color: rgba(37, 62, 112, 0.5);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
</style>